<!--
 * @Author: ChengNan 1429323234@qq.com
 * @Date: 2024-07-09 16:32:43
 * @LastEditors: ChengNan 1429323234@qq.com
 * @LastEditTime: 2024-08-07 14:52:57
 * @FilePath: /src/views/8.displayFlex/displayFlex.vue
 * @Description: 
-->
<template>
  <div class="displayFlex">
    <a href="https://baijiahao.baidu.com/s?id=1795304916931420534&wfr=spider&for=pc">
      https://baijiahao.baidu.com/s?id=1795304916931420534&wfr=spider&for=pc
    </a>
    <h1>block</h1>
    <div class="box">
      <div></div>
      <div></div>
      <div></div>
    </div>

    <h1>flex</h1>
    <div class="box flex">
      <div></div>
      <div></div>
      <div></div>
    </div>

    <h1>flex justify-content</h1>
    <div class="box flex js-center" style="width: 800px;">
      <div></div>
      <div></div>
      <div></div>
    </div>

    <h1>flex align-items</h1>
    <div class="box flex js-center al-center" style="width: 800px;">
      <div></div>
      <div></div>
      <div></div>
    </div>

    <h1>flex flex-column</h1>
    <div class="box flex flex-column js-center al-center" style="width: 800px;">
      <div></div>
      <div></div>
      <div></div>
    </div>

    <h1>flex flex-warp</h1>
    <div class="box flex js-center flex-warp" style="width: 650px;">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div style="flex-grow: 1;"></div>
      <div style="flex-grow: 1;font-size: 40px;">flex-grow-1</div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'displayFlex',
  created () {
  },
}
</script>

<style lang="scss" scoped>
.displayFlex {
  width: fit-content; margin: 0 auto;
}
.flex {
  display: flex;
}
.js-center {
  justify-content: center;
}
.al-center {
  align-items: center;
}
.flex-column {
  flex-direction: column;
}
.flex-warp {
  flex-wrap: wrap;
}
.box {
  margin: 0 auto;
  width: fit-content;
  background-color: red;
  padding: 20px;
  margin-bottom: 10px;
  div {
    width: 100px; height: 100px; border: 4px solid #ffea00;
    &:nth-child(2) {
      width: 150px; height: 150px;
    }
  }
}

</style>